import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, ImageBackground, Image, FlatList, StatusBar, TextInput, ScrollView, Picker} from 'react-native';
import { base } from "../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'

type Props = {};
export default class MyMiner extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '我的矿机',
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null,
            headerRight: <TouchableOpacity onPress={() => navigation.navigate('DailyIncome')}><View style={{ paddingRight: 10 }}><Text style={{color: '#ff7606'}}>查看每天收益</Text></View></TouchableOpacity>
        }
    }
    constructor() {
        super();
        this.state = {
            bind: true
        }
    }
    render() {
        if (!this.state.bind) {
            return (
                <View style={[base.flex_1, base.bg_white, base.content_container, { marginTop: 20 }]}>
                    <View style={[base.bg_gray, base.flex_col_center, { height: 160, borderRadius: 5, marginBottom: 20 }]}>
                        <View style={[base.flex_row_center]}>
                            <Text>暂未绑定矿机，</Text>
                            <TouchableOpacity>
                                <Text style={{ color: '#068dff' }}>去绑定</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={[base.flex_1]}>
                        <View style={[base.flex_row_start, {paddingVertical: 10}]}>
                            <TouchableOpacity style={[base.flex_row_center, { marginRight: 20 }]}>
                                <Text style={[base.color_orange, {fontSize: 16}]}>全部</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={[base.flex_row_center]}>
                                <Text style={[base.color_gray, {fontSize: 16}]}>未开启/故障</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={[base.flex_row_between, { paddingVertical: 15, marginTop: 10, borderColor: '#eee', borderBottomWidth: 1, borderTopWidth: 1 }]}>
                            <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>矿机编号</Text></View>
                            <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>累计收入</Text></View>
                            <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>状态</Text></View>
                            <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>详情</Text></View>
                        </View>
                        <FlatList
                            data={[
                                {
                                    key: 'a',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'b',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'c',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'd',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'e',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'f',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                                {
                                    key: 'g',
                                    id: '321321321',
                                    income: '100 FCC',
                                    state: '挖矿中'
                                },
                            ]}
                            renderItem={
                                ({item}) => {
                                    return (
                                        <View style={[base.flex_row_between, { paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                                            <View><Text style={[base.color_gray]}>{item.id}</Text></View>
                                            <View><Text style={[base.color_gray]}>{item.income}</Text></View>
                                            <View><Text style={[base.color_gray]}>{item.state}</Text></View>
                                            <TouchableOpacity>
                                                <Text style={{color: '#068dff'}}>查看详情</Text>
                                            </TouchableOpacity>
                                        </View>
                                    )
                                }
                            }/>
                    </View>
                </View>
            )
        } else {
                    return (
                        <View style={[base.flex_1, base.bg_white, base.content_container, { marginTop: 20 }]}>
                            <View style={[base.bg_gray, base.flex_col_between, { position: 'relative', height: 160, borderRadius: 5, marginBottom: 20 }]}>
                                <Image style={[{
                                        position: 'absolute',
                                        top: 0,
                                        left: 0,
                                        width: '100%',
                                        height: '100%',
                                        borderRadius: 5
                                    }]} source={require('@images/mine/bg_miner.jpeg')}/>
                                <View style={[base.flex_row_between, base.content_container, { width: '100%', paddingVertical: 15 }]}>
                                    <View><Text style={[ base.color_white, { fontSize: 16 } ]}>总矿机数量： 10</Text></View>
                                    <TouchableOpacity onPress={() => this.props.navigation.navigate('AddMiner')} style={[base.bg_white, base.flex_row_center, { borderRadius: 3, paddingVertical: 4, paddingHorizontal: 5 }]}>
                                        <Text style={[base.color_orange, { fontSize: 12 }]}>添加矿机</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[base.content_container, {width: '100%'}]}>
                                    <View style={[base.flex_row_start]}><Text style={[base.color_white, { fontSize: 16 }]}>总收入</Text></View>
                                    <View style={[base.flex_row_start, { paddingTop: 5 }]}><Text style={[base.color_white, { fontSize: 28 }]}>1,5000 FCC</Text></View>
                                </View>
                                <View style={[base.flex_row_end, base.content_container, { paddingBottom: 5, width: '100%' }]}>
                                    <Text style={[base.color_white, { fontSize: 13 }]}>最后更新: 2018-10-31 12:00</Text>
                                </View>
                            </View>
                            <View style={[base.flex_1]}>
                                <View style={[base.flex_row_start, {paddingVertical: 10}]}>
                                    <TouchableOpacity style={[base.flex_row_center, { marginRight: 20 }]}>
                                        <Text style={[base.color_orange, {fontSize: 16}]}>全部</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={[base.flex_row_center]}>
                                        <Text style={[base.color_gray, {fontSize: 16}]}>未开启/故障</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={[base.flex_row_between, { paddingVertical: 15, marginTop: 10, borderColor: '#eee', borderBottomWidth: 1, borderTopWidth: 1 }]}>
                                    <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>矿机编号</Text></View>
                                    <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>累计收入</Text></View>
                                    <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>状态</Text></View>
                                    <View><Text style={[ base.color_gray, { fontSize: 14 } ]}>详情</Text></View>
                                </View>
                                <FlatList
                                    data={[
                                        {
                                            key: 'a',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'b',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'c',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'd',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'e',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'f',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                        {
                                            key: 'g',
                                            id: '321321321',
                                            income: '100 FCC',
                                            state: '挖矿中'
                                        },
                                    ]}
                                    renderItem={
                                        ({item}) => {
                                            return (
                                                <View style={[base.flex_row_between, { paddingVertical: 15, borderBottomWidth: 1, borderBottomColor: '#eee' }]}>
                                                    <View><Text style={[base.color_gray]}>{item.id}</Text></View>
                                                    <View><Text style={[base.color_gray]}>{item.income}</Text></View>
                                                    <View><Text style={[base.color_gray]}>{item.state}</Text></View>
                                                    <TouchableOpacity onPress={() => this.props.navigation.navigate('MinerDetail')}>
                                                        <Text style={{color: '#068dff'}}>查看详情</Text>
                                                    </TouchableOpacity>
                                                </View>
                                            )
                                        }
                                    }/>
                            </View>
                        </View>
                    )
        }
    }
}

const styles = StyleSheet.create({
});
